<template>
    <div>
        <div style="margin-bottom: 15px">
            <el-input v-model="params.name" style="width: 200px ; height: 40px" placeholder="请输入部名"></el-input>
            <el-input v-model="params.description" style="width: 200px ; height: 40px ; margin-left :5px" placeholder="描述"></el-input>
            <el-button type="primary" style="margin-left: 8px" @click="findBySearch()"  round>搜索</el-button>
            <el-button type="primary" @click="clean()" round>清空</el-button>
            <el-button type="success" @click="add()" round>新增</el-button>
        </div>
        <div class="table-container">
            <el-table
                    :data="tableData"
                    style="width: 100%;max-height: 100%;margin-bottom: 5px; margin-right: 5px;">
                <el-table-column prop="name" label="部门名称" width="150">
                </el-table-column>
                <el-table-column prop="description" label="描述" width="150">
                </el-table-column>

                <el-table-column label="操作">
                    <!--绑定整条数据  -->
                    <template slot-scope="scope">
                        <!-- 表示把当前这一行数据传给这个方法 -->
                        <el-button type="success" @click="edit(scope.row)" round>编辑</el-button>
                        <el-popconfirm title="确定删除吗？" @confirm="del(scope.row.id)">
                            <el-button slot="reference" type="danger" style="margin-left: 5px" round>删除</el-button>
                        </el-popconfirm>
                    </template>

                </el-table-column>
            </el-table>
        </div>
        <div class="block" style="margin-top: 20px">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="params.pageNum"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="params.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <!-- 对话框   -->
        <div>
            <el-dialog title="请填写信息" :visible.sync="dialogFormVisible" width="20%">
                <el-form :model="form">
                    <el-form-item label="部门名称"  width="50%">
                        <el-input v-model="form.name" autocomplete="off" style="width: 85%"></el-input>
                    </el-form-item>
                    <el-form-item label="描述"  width="50%">
                        <el-input v-model="form.description" autocomplete="off" style="width: 85%"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="dialogFormVisible = false" >取 消</el-button>
                    <el-button type="primary" @click="submit()">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import request from "@/utils/request";

    export default {
        data() {
            return {
                params: {
                    //是弱语言，不写也行
                    name: '',
                    description: '',
                    //分页需要传到后端的数据
                    pageNum: 1,
                    pageSize: 10,
                },
                tableData: [],
                total: 0,
                dialogFormVisible: false,
                form: {}
            }
        },
        //页面生成时需要做的事
        created() {
            this.findBySearch();
        },
        methods: {
            findBySearch() {
                request.get("/dept/search",{
                    params: this.params
                }).then(res=>{
                    if (res.code === '0') {
                        this.tableData = res.data.list;
                        this.total = res.data.total;
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            },
            //弹出对话框
            add() {
                this.form = {}
                /*设置对话款能看到* 注意this*/
                this.dialogFormVisible = true
            },
            //清空
            clean() {
                this.params = {
                    name:'',
                    description:'',
                    pageNum: 1,
                    pageSize: 10
                }
                this.findBySearch();
            },
            /*有一个回调参数 页数大小*/
            handleSizeChange(pageSize) {
                //给params里面的pageSize赋值
                this.params.pageSize = pageSize
                //还要查一遍才能显示数据
                this.findBySearch();
            },
            handleCurrentChange(pageNum) {
                this.params.pageNum = pageNum
                this.findBySearch();
            },
            //增加事件的接口
            submit() {
                request.post("/dept",this.form).then(res => {
                    //注意此处的0带单引号
                    if (res.code === '0') {
                        this.$message({
                            message: '恭喜你，添加成功',
                            type: 'success'
                        });
                        this.dialogFormVisible = false;
                        this.findBySearch();
                    } else {

                        this.$message.error(res.msg);
                    }
                })
            },
            //编辑的方法
            edit(obj) {
                this.form = obj;
                this.dialogFormVisible = true;
            },
            del(id) {
                request.delete("/dept/" + id).then(res => {
                    if (res.code === '0') {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.findBySearch();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        });
                    }
                })
            }
        }
    }
</script>
